<template>
  <a-layout-sider
    :theme="theme"
    v-model="collapsed"
    collapsible
    :collapsedWidth="80"
    :trigger="null"
  >
    <div class="logo">
      <img
        :src="logoSrc"
        :class="!collapsed ? 'img' : ''"
        alt="logon"
      >
    </div>
    <a-menu
      :default-selected-keys="[current]"
      :default-open-keys="[current]"
      :theme="theme"
      mode="inline"
      :selected-keys="[current]"
      @click="handleClickMenu"
    >
      <template v-for="item in menuData">
        <a-sub-menu
          v-if="item.children && item.children.length > 0"
          :key="item.key"
        >
          <span slot="title">
            <a-icon
              v-if="item.icon"
              :type="item.icon"
            />
            <span>{{item.text}}</span>
          </span>
          <a-menu-item
            v-for="itemChildren in item.children"
            :key="itemChildren.key"
          >
            <span>{{itemChildren.text}}</span>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item
          v-else
          :key="item.key"
        >
          <a-icon :type="item.icon" />
          <span>{{item.text}}</span>
        </a-menu-item>
      </template>
    </a-menu>
  </a-layout-sider>
</template>

<script>
import { menuData } from "./data";
import logo from "@/assets/logo-fnd.png";
import logoLong from "@/assets/logo-long-fnd.png";

export default {
  name: "sideMenu",
  props: {
    collapsedValue: Boolean,
  },
  data() {
    return {
      logoSrc: "",
      menuData,
      collapsed: this.collapsedValue,
      current: "",
      theme: "dark", //"light",
    };
  },
  watch: {
    collapsedValue(value) {
      this.collapsed = value;
      this.logoSrc = this.collapsed ? logo : logoLong;
    },
  },
  created() {
    this.logoSrc = this.collapsed ? logo : logoLong;
    // this.current = menuData[0].key;
    this.current = '/table2'
  },
  methods: {
    handleClickMenu(e) {
      this.current = e.key;
      this.$router.push(e.key);
    },
  },
};
</script>

<style scoped lang="less">
.ant-layout-sider {
  height: 100%;
  overflow-y: auto;
  color: #fff;
}
.logo {
  height: 64px;
  position: relative;
  line-height: 64px;
  padding-left: 24px;
  transition: all 0.3s;
  overflow: hidden;
  background-color: #002140;
  .img {
    width: 148px;
  }
}
</style>